import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'
const Kind = ({ categoryList, getCategoryList }) => {
  useEffect(() => {
    getCategoryList()
  }, [getCategoryList])
  return (
    <div>
      <h1>分类</h1>
      <ul>
        {
          categoryList && categoryList.map(item => {
            return (<li key = { item }>{item}</li>)
          })
        }
      </ul>
    </div>
  );
};

// export default connect((state) => {
//   return {
//     categoryList: state.kind.categoryList
//   }
// }, (dispatch) => {
//   return {
//     getCategoryList () {
//       fetch('http://121.89.205.189:3001/api/pro/categorylist').then(res => res.json()).then(res => {
//         console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
//         dispatch({
//           type: 'CHANGE_CATEGORY_LIST',
//           payload: res.data
//         })
//       })
//     }
//   }
// })(Kind);
export default connect(({ state: { kind: { categoryList } } }) => {
  return {
    categoryList
  }
}, (dispatch) => {
  return {
    getCategoryList () {
      fetch('http://121.89.205.189:3001/api/pro/categorylist').then(res => res.json()).then(res => {
        console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
        dispatch({
          type: 'CHANGE_CATEGORY_LIST',
          payload: res.data
        })
      })
    }
  }
})(Kind);